
<template>
  <div>
    <div class="category_title">
      <div class="shutiao"></div>
      <div>新增随访</div>
      <div class="button">
        <el-button type="primary" v-show="follow_status" @click="getRowKeys"
          >立即随访</el-button
        >
        <el-button
          type="primary"
          :disabled="cancel_disabled_status"
          v-show="cancel_status"
          @click="cancelFollow"
          >取消随访</el-button
        >
        <el-button
          v-show="complete_status"
          type="primary"
          :disabled="complete_disabled_status"
          @click="completeFollow"
        >
          完成随访
        </el-button>
        <el-button
          type="primary"
          style="margin-right: 40px; margin-left: 20px"
          @click="getRowKey"
          >返回</el-button
        >
      </div>
    </div>
    <el-tabs v-model="activeName" type="border-card" class="elementstyle">
      <el-tab-pane label="通知" name="second"> </el-tab-pane>
      <el-tab-pane label="基本信息" name="first"
        ><div v-if="activeName == 'first'">
          <the-basic-information
            :patId="patId"
            :memPatTypeCodes="memPatTypeCodes"
            :planId="planId"
          ></the-basic-information>
        </div>
      </el-tab-pane>

      <el-tab-pane label="就诊信息" name="third">
        <div v-if="activeName == 'third'">
          <the-hospital-information></the-hospital-information>
        </div>
      </el-tab-pane>

      <el-tab-pane label="随访信息" name="third1">
        <div v-if="activeName == 'third1'">
          <follow-up-information
            :patId='patId'
            :planId="planId"
            :add_button_status="add_button_status"
            :memPatTypeCodes="memPatTypeCodes"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="检测信息" name="fourth">
        <div v-if="activeName == 'fourth'">
          <testing-insights :state="state" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="用药信息" name="fourth1">
        <div v-if="activeName == 'fourth1'">
          <the-medical-information />
        </div>
      </el-tab-pane>
      <el-tab-pane label="问诊" name="fourth2">问诊</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
// @ts-nocheck
import { mapState } from 'vuex' // 引入
import { over } from '@/api/follow-up/follow-up-information'
import follow_up_information from '@/views/follow-up/follow-up-information'
import the_basic_information from '@/views/follow-up/the-basic-information'
import the_medical_information from '@/views/follow-up/the-medical-information'
import the_hospital_information from '@/views/follow-up/the-hospital-information'
import testing_information from '@/views/follow-up/testing-information'
import testing_insights from '@/views/follow-up/testing-insights'
// import thepicture from '@/views/follow-up/thepicture'
export default {
  name: 'followUpNew',
  components: {
    'the-basic-information': the_basic_information,
    'follow-up-information': follow_up_information,
    'the-medical-information': the_medical_information,
    'the-hospital-information': the_hospital_information,
    'testing-insights': testing_insights // 用户管理组件
    // "thepicture": thepicture
  },
  props: [],
  data() {
    return {
      state: 1,
      activeName: 'first',
      patId: '',
      memPatTypeCodes: '',
      planId: '',
      /*  planPatId: "", */
      activities: [
        {
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: "large",
          type: "primary",
          icon: "el-icon-more",
        },
        {
          content: "支持自定义颜色",
          timestamp: "2018-04-03 20:46",
          color: "#0bbd87",
        },
        {
          content: "支持自定义尺寸",
          timestamp: "2018-04-03 20:46",
          size: "large",
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03 20:46",
        },
      ],
      // follow_status: this.$route.query.follow_status,
      // cancel_status: this.$route.query.cancel_status,
      // complete_status: this.$route.query.complete_status,
      //  follow_status: sessionStorage.getItem("follow_status"),
      // cancel_status: sessionStorage.getItem("cancel_status"),
      // complete_status: sessionStorage.getItem("complete_status"),
      follow_status: "",
      cancel_status: "",
      complete_status: "",
      cancel_disabled_status: false,
      complete_disabled_status: false,
      add_button_status: "",
    };
  },
  computed: {},
  watch: {
    add_button_status: {
      handler() {
        /**
         * 哪页存值，就写到哪页
         */
        this.$store.commit("tagsView/ADD_BUTTON_STATE", {
          addButtonState: this.add_button_status,
        });
      },
      immediate: true,
    },
  },
  created() {
    this.state = sessionStorage.getItem("state");
    this.activeName = this.$route.query.activeName;
    this.add_button_status = this.$route.query.add_button_status;
    this.patId = this.$route.query.patId;
    this.memPatTypeCodes = this.$route.query.memPatTypeCodes;
    this.planId = this.$route.query.planId;

    if (this.cancel_status == true) {
      this.add_button_status = true;
    }
    if (sessionStorage.getItem("state") == "1") {
      this.follow_status = sessionStorage.getItem("follow_status");
    } else if (sessionStorage.getItem("state") == "2") {
      this.cancel_status = sessionStorage.getItem("cancel_status");
      this.complete_status = sessionStorage.getItem("complete_status");
      //  this.follow_status=sessionStorage.getItem("follow_status");
    }
  },
  methods: {
    getRowKey() {
      this.$router.push({
        path: "follow-up-records",
      });
    },
    getRowKeys() {
      /*  this.$router.push({
        path: "thepicture",
      }); */
      this.add_button_status = true;
      this.follow_status = false;
      this.cancel_status = true;
      this.complete_status = true;
      sessionStorage.setItem("follow_status", "false");
      sessionStorage.setItem("cancel_status", "true");
      sessionStorage.setItem("complete_status", "true");
      sessionStorage.setItem("state", "2");
      this.state = 2;
      sessionStorage.setItem("add_button_status", "true");
    },
    cancelFollow() {
      this.add_button_status = false;
      this.follow_status = true;
      this.cancel_status = false;
      this.complete_status = false;
      sessionStorage.setItem("follow_status", "true");
      sessionStorage.setItem("cancel_status", "false");
      sessionStorage.setItem("complete_status", "false");
      sessionStorage.setItem("state", "1");
      this.state = 1;
      sessionStorage.setItem("add_button_status", "");
    },
    completeFollow() {
      sessionStorage.setItem("follow_status", "true");
      sessionStorage.setItem("cancel_status", "false");
      sessionStorage.setItem("complete_status", "false");
      sessionStorage.setItem("state", "1");
      this.state = 1;
      sessionStorage.setItem("add_button_status", "");
      this.add_button_status = false;
      this.follow_status = false;
      this.cancel_status = true;
      this.complete_status = true;
      this.cancel_disabled_status = true;
      this.complete_disabled_status = true;
      let params = {
        patId: this.patId,
      };
      over(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.category_title {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  margin-top: 20px;
  margin-left: 20px;
}
.shutiao {
  display: inline-block;
  width: 5px;
  height: 20px;
  border-radius: 28%;
  background-color: #4380ea;
  vertical-align: middle;
  margin-right: 6px;
}
.button {
  display: flex;
  margin-left: auto;
}
.tabs_panel {
  display: flex;
  margin-bottom: 30px;
  .tabs_items {
    font-size: 18px;
    font-weight: bold;
    color: #a1a8b3;
    margin-right: 40px;
    cursor: pointer;
    &.active_current {
      color: #4380ea;
    }
  }
}
.elementstyle {
  margin-left: 20px;
  margin-right: 20px;
}
</style>








